<template>
  <div class="c-pz1002 c-w100 c-h c-pf c-p-l0 c-p-t0 c-flex-row c-justify-center c-aligni-end">
    <div class="c-translucent-balck50 c-text-hidden c-pz-1 c-w100 c-h c-pa c-p-l0 c-p-t0" @click="closeFormModal"></div>
    <article class="recommend-form c-w100 c-bg-white c-flex-column c-p c-pz1 c-br-tl20 c-br-tr20 c-fc-xblack c-hh830 c-pb100 c-contexty-auto">
      <div class="c-hh240 c-p ">
        <div class="c-pa c-p-t0 c-p-l0 c-pz-1 c-w100 c-hh240 c-text-hidden">
          <img :src="$addXossFilter(bgImg)" alt="" class="c-w100" v-if="bgImg">
        </div>
        <div class="c-translucent-balck50 c-w100 c-hh240 c-fc-white c-fs26 c-lh32 c-flex-row c-flex-center">
          {{formName}}
        </div>
      </div>
      <header class="c-fs24 c-fc-sblack c-mt28 c-mb40 c-ws-pw c-bg-white c-ph24" :class="cfg && cfg.isCopy == 0 ? 'copyNot' : ''">{{desc}}</header>
      <form-com :formInfo="formInfo" :formComList="formList" :fUsername="username" :fCkFrom="ckFrom"
        :fMobile="mobile" @submitForm="submitForm"></form-com>
    </article>
  </div>
</template>

<script>
import formCom from '@/components/homePage/form/formCom'
import { utilJs } from "@/utils/common.js";
export default {
  name: "recommendForm",
  components: {
    formCom
  },
  props: {
    isLive: {
      type: String,
      default: ''
    },
    socialRoomId:{
      type: String,
      default: ''
    },
    detailId:{
      type: String,
      default: ''
    },
  },
  data() {
    return {
      cfg: JSON.parse(localStorage.getItem("cfg")),
      formList: [],
      desc: '',
      formName: '',
      bgImg: '',
      mobile: '',
      username: '',
      ckFrom: '',
      formInfo: {},
    };
  },
  methods: {
    public_openRecommendFrom(formInfo) {
      this.relId = formInfo.prodId;
      this.relType = formInfo.relType || 1;//来自哪个产品 1 报名表单 2 调研表单 其他：产品类型
      this.type = formInfo.type || 2; //
      this._isClicking = false;
      this.getFormData();
    },
     closeFormModal(e) {
      this.$emit("closedFormModal");
    },
    getFormData() {
      if (this._isClicking) {
        return;
      }
      this._isClicking = true;
      let postUrl = `${global.apiurl}k12/forms/formShow?relId=${this.relId}&relType=${this.relType}&type=${this.type}&socialRoomId=${this.socialRoomId}&detailId=${this.detailId}`;
      utilJs.getMethod(postUrl, res => {
        this._isClicking = false;
        if (!res) {
          this.$showCjToast({
              text: "未找到该表单",
              type: "error",
          })
          this.closeFormModal();
          return;
        }
        this.desc = res.desc;
        this.formName = res.name;
        this.bgImg = res.bgImg;
        this.fId = res.fId;
        this.username = res.username
        this.mobile = res.mobile
        this.formList = res.content;
        this.formInfo = res;
      }, () => {
        this._isClicking = false;
        this.$showCjToast({
            text: "未找到该表单",
            type: "error",
        })
        this.closeFormModal();
      });
    },
    //提交表单
    submitForm(subData) {
      let data = {
        fId: this.fId,
        content: subData.content,
        relId: this.relId,
        relType: this.relType,
        type: this.type,
        duration: subData.duration,
        isSubmitForm:subData.isSubmitForm
      };
      if (this._isClicking) {
        return;
      }
      this._isClicking = true;
      utilJs.postMethod(global.apiurl + "k12/forms/submitForm", data, (res) => {
        this._isClicking = false;
        this._isSendPoints = res.isSendPoints;
        this.getFormSuccess();
      }, () => {
          this._isClicking = false;
          this.$showCjToast({
            text: "提交失败",
            type: "error",
          })
        });
    },
    getFormSuccess() {
      if (this.relType != 2 || this.type != 2) {
        this.submitSuccess();
        return;
      }
       let url = `${global.apiurl}k12/forms/formSubmitSuccess/${this.relId}`
      utilJs.getMethod(url, res => {
        if (res.submitShowType != 1) {
          this.submitSuccess();
          return;
        }
        this._giveType = res.giveType ? res.giveType : []
        this._couponList = res.coupons && res.coupons.length > 0 ? res.coupons : []
        let isGetPoints = this._isSendPoints == 2 && this._giveType.includes(2);
        let isGetCoupons = this._couponList.length && this._giveType.includes(1);
        if (isGetPoints || isGetCoupons) {
          this.$showCjToast({
              text: "提交成功，相关奖励已自动发放！",
              type: "success",
          });
        }
        this.submitSuccess();
      })
    },
    submitSuccess() {
      this.$showCjToast({
          text: "提交成功",
          type: "success",
      })
      this.$emit('submitFormSuccess');
    },
  },
  activated() {
  },
  deactivated() { }
}
</script>

<style scoped>
.closeBig >>> p > img,
.closeBig >>> section > img,
.closeBig >>> div > img,
.closeBig >>> img {
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
  user-select: none;
}
.aCloseBig >>> p > a > img,
.aCloseBig >>> section > a > img,
.aCloseBig >>> div > a > img {
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
  user-select: none;
}
.recommend-form >>> .vux-popup-dialog{
  z-index: 5000;
}
</style>
